<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="dropFrame"
     style="width: 300px; height: 200px; border: 2px dashed #ccc; text-align: center; line-height: 200px;">
    拖拽文件夹到这里
</div>
</body>
<script>
    let dropFrame = document.getElementById('dropFrame');

    // 阻止默认拖放行为
    dropFrame.addEventListener('dragover', (e) => {
        e.preventDefault(); // 阻止默认处理（默认不允许放置）
        e.dataTransfer.dropEffect = 'copy'; // 设置拖放效果
    });

    // 处理文件或文件夹的拖放
    dropFrame.addEventListener('drop', (e) => {
        e.preventDefault(); // 阻止默认处理（默认处理文件放置）
        e.stopPropagation(); // 停止事件冒泡

        // 遍历拖放的数据项
        let items = e.dataTransfer.items;
        for (let item of items) {
            // 尝试获取作为文件系统的条目
            let entry = item.webkitGetAsEntry(); // 注意：这是WebKit特有的API，非标准

            if (entry) {
                if (entry.isDirectory) {
                    // 处理文件夹
                    handleDirectory(entry);
                } else if (entry.isFile) {
                    // 处理文件
                    // handleFile(entry.file());
                    handleFile(entry);
                }
            }
        }
    });

    // 处理文件夹的函数（递归遍历文件夹）
    function handleDirectory(directoryEntry) {
        let reader = directoryEntry.createReader();
        reader.readEntries((entries) => {
            for (let entry of entries) {
                console.log("=====>", 1);
                console.log("=====>", entry);
                console.log("=====>", entry.isDirectory);
                if (entry.isDirectory) {
                    handleDirectory(entry); // 递归处理子文件夹
                } else if (entry.isFile) {
                    // handleFile(entry.file()); // 处理文件
                    handleFile(entry); // 处理文件
                }
            }
        });
    }

    // 处理文件的函数（这里只是简单地打印文件信息，实际中可以上传文件）
    function handleFile(entry) {
        var myfile = entry.file();
        console.log(entry);
        console.log(myfile);
        // 上传文件到服务器的代码（这里省略）
    }
</script>
</html>